<template>
	<view class="header main-flex">
		<view class="header-left main-flex" @click="goPage('/pages/index')">
			<image class="header-logo" mode="heightFix" src="/static/logo.png"></image>
			<view class="header-name">廷与收银系统</view>
		</view>
		<view class="header-menu main-flex">
			<view class="header-menu-item" :class="type === '/' ? 'active' : ''" @click="goPage('/pages/index')">
				<image class="header-menu-item-icon" src="/static/images/cashier/cashier-icon.png"></image>
				<view class="header-menu-item-name">收银台</view>
			</view>
			<view class="header-menu-item" :class="type === 'order' ? 'active' : ''" @click="goPage('/pages/order/order')">
				<image class="header-menu-item-icon" src="/static/images/cashier/cashier-icon.png"></image>
				<view class="header-menu-item-name">订单</view>
			</view>
			<!-- <view class="header-menu-item">
				<view class="header-menu-item-name">ERP系统</view>
			</view> -->
		</view>
		<view class="header-right main-flex">
			<view class="header-user main-flex">
				<image class="header-user-header" v-if="userStore.avatar" :src="userStore.avatar" mode="widthFix"></image>
				<view class="header-user-left">
					<view class="header-user-name">收银员：{{userStore.user.name}}</view>
					<view class="header-user-money">余额：{{userStore.user.balance}}</view>
				</view>
			</view>
			<view class="header-other">
				<view class="header-time">{{time}}</view>
				<view class="header-operate main-flex">
					<view class="header-operate-item" @click="layout">退出</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import useUserStore from '@/store/modules/user'
	const props = defineProps({
		type: {
			type: String,
			default: '/'
		}
	})
	const userStore = useUserStore()
	const time = ref('')
	// 获取时间
	const getTime = () => {
		time.value = uni.$u.timeFormat(new Date(), 'yyyy年mm月dd日 h时M分s秒')
		setInterval(() => {
			time.value = uni.$u.timeFormat(new Date(), 'yyyy年mm月dd日 h时M分s秒')
		}, 1000)
	}
	// 退出
	const layout = () => {
		userStore.logOut().then(() => {
			uni.reLaunch({ url: '/pages/login' })
		})
	}
	const goPage = (url) => {
		uni.redirectTo({
			url
		})
	}
	onMounted(() => {
		getTime()
	})
</script>
<style lang="scss" >
	.header {
		width: 100%;
		height: 100px;
		background-color: #32324e;
		padding: 0 20px;
		color: #ffffff;
		&-logo {
			height: 60px;
			border-radius: 50%;
			cursor: pointer;
		}
		&-name {
			font-size: 24px;
			font-weight: 800;
			margin-left: 10px;
		}
		&-menu {
			padding: 0 20px;
			&-item {
				width: 80px;
				margin: 0 10px;
				padding: 10px;
				text-align: center;
				cursor: pointer;
				border-radius: 5px;
				&-icon {
					width: 28px;
					height: 28px;
				}
				&-name {
					margin-top: 6px;
					font-size: 14px;
				}
			}
			.active {
				background-color: #42425e;
			}
		}
		&-right {
			margin-left: auto;
		}
		&-operate {
			margin-top: 10px;
			justify-content: flex-end;
			&-item {
				cursor: pointer;
				margin: 0 10px;
			}
		}
		&-other {
			margin-left: 40px;
		}
		&-user {
			&-header {
				width: 60px;
				height: 60px;
				border-radius: 50%;
			}
			&-left {
				margin-left: 20px;
			}
			&-name {
				font-size: 14px;
			}
			&-money {
				font-size: 14px;
				margin-top: 10px;
			}
		}
		&-time {
			font-size: 20px;
		}
	}
</style>
